<template>
	<view class="pages-index">
		<view class="lb-img">
	<fui-swiper-dot type="1" :items="plLists" :current="current" :styles="styles">
		<swiper class="fui-banner__wrap" @change="swpChange" circular :indicator-dots="false" autoplay :interval="4000"
		 :duration="150">
			<!-- baseOssUrl2  -->
			<swiper-item v-for="(item,index) in plLists" :key="index">
				<view class="fui-banner__item">
					<image style="width: 100%;height: 100%;" mode="aspectFill" :src="baseOssUrl2 + item.headPhoto"></image>
				</view>
			</swiper-item>
		</swiper>
	</fui-swiper-dot>
	</view>
		<view class="list-box">
			<view class="item-box" v-for="(item,index) in plLists" :key="index" @click="detailsBnt(item.id)">
				<image :src=" baseOssUrl2 + item.headPhoto" style="width: 331rpx;height: 270rpx;border-radius: 16rpx 16rpx 0 0 ;" mode=""></image>
				<view class="text-boxs">
					<view class="text">
						{{item.title}}
					</view>
					<view class="bom-box">
						<view class="money">
							￥{{item.dj}}
						</view>
						<view class="bnt-box" @click.stop="ljBnt(item)">
							立即购买
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		data() {
			return {
				current: 0,
				id:'',
				plLists:[], //列表
				pltotal:'',
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2,
				bigImgshow: false,
				// styles: {
				// 	// width:25,
				// 	left: 700,
				// 	height: 10,
				// 	bottom: 20,
				// 	background: '#888888',
				// 	activeBackground: '#FFFFFF',
				// 	activeWidth: 20,
				// },
			}
		},
		onLoad(e) {
			this.id = e.id
			this.plList()
		},
		methods: {
			swpChange(e) {
				this.current = e.detail.current;
			},
			// 列表
			plList() {
				this.$http.get(this.$httpApi.creativegoodslist, {
					data: {
						 page: 99,
						 limit:999
					}
				}).then(res => {
					if (res.code == 0) {
						this.plLists = res.page
						this.pltotal = res.total
					}
				})
			},
			// 跳转详情
			detailsBnt(e) {
				uni.navigateTo({
					url:'/pages/writing/details/index?id=' + e
				})
			},
			// 购买
			ljBnt(e) {
				if(e.sl == 0) {
					uni.showToast({
						icon: 'none',
						title: '商品已售空!',
						duration: 2000
					});
					return
				}
				uni.navigateTo({
					url:'/pages/writing/buy/index?id=' + e.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pages-index {
		height: 100%;
		/deep/.fui-banner__wrap {
			width: 100%;
			height: 380rpx !important;
			.fui-banner__item {
				width: 100%;
				height: 100%;
			}
		}
		.lb-img {
			position: relative;
		
			/deep/.fui-banner__wrap {
				height: 380rpx !important;
			}
		
			.icon-img {
				position: absolute;
				top: 0rpx;
				z-index: 999;
				right: 30rpx;
				display: flex;
		
				.icon-btn {
					background: rgba(0, 0, 0, 0);
					width: 70rpx;
					height: 60rpx;
		
					&::after {
						border-width: 0;
					}
				}
		
				.iconPn {
					width: 37rpx;
					height: 36rpx;
		
					&:first-child {
						margin-right: 30rpx;
					}
				}
		
			}
		}
		.list-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 18rpx 32rpx 18rpx 32rpx;
			.item-box {
				width: 331rpx;
				height: 416rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				.text-boxs {
					padding: 24rpx 24rpx 24rpx 16rpx;
					.text {
						font-size: 28rpx;
						font-weight: 400;
						color: #1D1D1D;
						overflow:hidden;
						white-space:nowrap;
						text-overflow:ellipsis;
					}
					.bom-box {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						.money {
							font-size: 26rpx;
							font-weight: bold;
							color: #D93C3C;
						}
						.bnt-box {
							margin-left: auto;
							text-align: center;
							line-height: 48rpx;
							width: 129rpx;
							height: 48rpx;
							background: #35743D;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
